<template>
  <div>
    <div class="centre-left">
      <!-- 小图 -->
      <img :src="images[0]" alt="" />
      <!-- 遮罩层  -->
      <div class="event" @mousemove="move"></div>
      <!-- 大图 -->
      <div class="big">
        <img
          :src="images[0]"
          alt=""
          :style="{
            left: -2 * left + 'px',
            top: -2 * top + 'px',
          }"
        />
      </div>
      <!-- 遮罩层 -->
      <div
        class="mask"
        :style="{
          left: left + 'px',
          top: top + 'px',
        }"
      ></div>
    </div>
  </div>
</template>

<script>
import throttle from "lodash/throttle"
export default {
  name: "Zoom",
  props: {
    images: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      left: 0,
      top: 0,
    }
  },
  methods: {
    // 使用节流
    // 鼠标移入 计算 left 和 top 值
    move: throttle(function (e) {
      let left = e.offsetX - 100
      if (left < 0) left = 0
      if (left > 400) left = 400
      let top = e.offsetY - 100
      if (top < 0) top = 0
      if (top > 400) top = 400
      this.left = left
      this.top = top
    }, 1000 / 60),
  },
}
</script>

<style lang="less" scoped>
.centre-left {
  width: 600px;
  height: 600px;
  position: relative;
  img {
    width: 560px;
    height: 560px;
  }
  .event {
    width: 100%;
    height: 100%;
    border: 1px solid #ccc;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 999;
  }
  .mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 200px;
    height: 200px;
    // background-color: rgba(0, 255, 0, 0.3);
    background-color: rgba(185, 204, 130, 0.1);
    display: none;
  }
  .big {
    position: absolute;
    left: 600px;
    top: 0;
    z-index: 99;
    background-color: #fff;
    border: 1px solid #ccc;
    width: 600px;
    height: 600px;
    overflow: hidden;
    display: none;
    img {
      width: 1200px;
      height: 1200px;
      background-color: #fff;
      position: absolute;
      left: 0;
      top: 0;
      // display: none;
    }
  }
  .event:hover ~ .mask,
  .event:hover ~ .big {
    display: block;
  }
}
</style>
